<template>
  
  <div class="app-container" style="position: relative; height: calc(100vh - 117px);">
    <div class="container">
      <el-tabs v-model="status" type="card" @tab-click="handleOrder">
        <el-tab-pane name="-9">
          <span slot="label"><i class="el-icon-monitor"></i> 全部订单</span>
        </el-tab-pane>
        <el-tab-pane name="0">
          <span slot="label"><i class="el-icon-bank-card"></i> 寄存期内</span>
        </el-tab-pane>
        <el-tab-pane name="1">
          <span slot="label"><i class="el-icon-warning-outline"></i> 已逾期</span>
        </el-tab-pane>
        <el-tab-pane name="2">
          <span slot="label"><i class="el-icon-truck"></i> 已延期内</span>
        </el-tab-pane>
        <el-tab-pane name="3">
          <span slot="label"><i class="el-icon-loading"></i> 买回中</span>
        </el-tab-pane>
        <el-tab-pane name="4">
          <span slot="label"><i class="el-icon-circle-check"></i> 已买回</span>
        </el-tab-pane>
        <el-tab-pane name="5">
          <span slot="label"><i class="el-icon-warning"></i> 回收</span>
        </el-tab-pane>
        <el-tab-pane name="6">
          <span slot="label"><i class="el-icon-bell"></i> 回收买回</span>
        </el-tab-pane>
        <!-- <el-tab-pane name="999">
          <span slot="label"><i class="el-icon-delete"></i> 删除</span>
        </el-tab-pane> -->
      </el-tabs>
      <!--工具栏-->
      <div class="head-container">
        <eRemark ref="form4" :is-add="isAdd" />
        <!-- 搜索 -->
        <el-input v-model="query.orderNo" clearable placeholder="寄存订单号" style="width: 150px;" class="filter-item" @keyup.enter.native="crud.toggleSearch" />
        <el-input v-model="query.userName" clearable placeholder="用户账号" style="width: 150px;" class="filter-item" @keyup.enter.native="crud.toggleSearch" />
        <el-input v-model="query.realName" clearable placeholder="真实姓名" style="width: 100px;" class="filter-item" @keyup.enter.native="crud.toggleSearch" />
        <el-select v-model="query.userTesterId" clearable placeholder="检测师" class="filter-item" filterable style="width: 200px" @change="crud.toQuery">
          <el-option v-for="item in optionsTesterList" 
            :value="item.uid"
            :key="item.uid"
            :label="item.userName + ' - ('+item.nickname+')'">
          </el-option>
        </el-select>
        <el-select v-model="query.isDelay" clearable placeholder="是否延期" class="filter-item" style="width: 100px">
          <el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
        </el-select>
		<!-- 商户列表搜索 -->
		<el-select v-model="query.businessId" clearable placeholder="商户列表" class="filter-item" filterable style="width: 200px" @change="crud.toQuery">
		  <el-option v-for="item in businessNameList" 
		    :value="item.id"
		    :key="item.id"
		    :label="item.businessName">
		  </el-option>
		</el-select>
        
        <el-date-picker style="width: 300px;" v-if="query.status =='0'"
          v-model="startTime"
          :default-time="['00:00:00','23:59:59']"
          type="daterange"
          range-separator=":"
          size="small"
          class="date-item"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="寄存开始时间"
          end-placeholder="寄存结束时间"
        />
        <el-date-picker style="width: 300px;" v-else-if="query.status =='2'" 
          v-model="delayPayTime"
          :default-time="['00:00:00','23:59:59']"
          type="daterange"
          range-separator=":"
          size="small"
          class="date-item"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="延期支付开始时间"
          end-placeholder="延期支付结束时间"
        />
        <el-date-picker style="width: 300px;" v-else-if="query.status =='4'"
          v-model="redeemTime"
          @change="getTimeT"
          :default-time="['00:00:00','23:59:59']"
          type="daterange"
          range-separator=":"
          size="small"
          class="date-item"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="买回开始时间"
          end-placeholder="买回结束时间"
        />
        <el-date-picker style="width: 300px;" v-else
          v-model="createTime"
          :default-time="['00:00:00','23:59:59']"
          type="daterange"
          range-separator=":"
          size="small"
          class="date-item"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="创建开始时间"
          end-placeholder="创建结束时间"
        />
        
        <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="crud.toQuery">搜索</el-button>
        <!-- 新增 -->
        <el-button
          type="danger"
          class="filter-item"
          size="mini"
          icon="el-icon-refresh"
          @click="crud.toQuery"
        >刷新</el-button>
		<!-- 导出 -->
		<el-button
		  :loading="crud.downloadLoading"
		  :disabled="!crud.data.length"
		  class="filter-item"
		  size="mini"
		  type="warning"
		  icon="el-icon-download"
		  @click="crud.doExport"
		>导出</el-button>
        </div>
        <!--表单组件-->
        <el-dialog :close-on-click-modal="false" :visible.sync="dialogVisible" title="查看详情" width="70%">
          <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px" style="margin-top: -4%;">
            <el-card shadow="never" style="margin-top: 5px">
                <div class="operate-container">
                  <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
                  <span class="color-danger">当前订单状态：
                    <!-- <strong style="color: red;">1111111</strong> -->
                    <span v-if="orderInfo.status === 0" style="color: #909399;" slot="reference">0-寄存期内</span>
                    <span v-else-if="orderInfo.status === 1" style="color: #f56c6c;" slot="reference">1-已逾期</span>
                    <span v-else-if="orderInfo.status === 2" style="color: #67c23a;" slot="reference">2-已延期内</span>
                    <span v-else-if="orderInfo.status === 3" style="color: #f124c7;" slot="reference">3-买回中</span>
                    <span v-else-if="orderInfo.status === 4" style="color:#409eff;" slot="reference">4-已买回</span>
                    <span v-else-if="orderInfo.status === 5" style="color: red;" slot="reference">5-回收</span>
                    <span v-else-if="orderInfo.status === 6" style="color: #e6a23c;" slot="reference">6-回收买回</span>
                    <span v-else style="display: inline-block">无</span>  
                  </span>
                </div>
                <div class="operate-container" style="margin-top: 15px">
                  <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                  <span class="font-small"><i class="el-icon-s-order"></i>&nbsp;基本信息</span>
                </div>
                <div class="table-layout">
                  <el-row>
                    <el-col :span="4" class="table-cell-title">寄存订单号</el-col>
                    <el-col :span="10" class="table-cell-title">寄存商品</el-col>
                    <el-col :span="10" class="table-cell-title">寄存商品图片</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="4" class="table-cell">{{orderInfo.orderNo}}</el-col>
                    <el-col :span="10" class="table-cell">{{orderInfo.depositGoods}}</el-col>
                    <el-col :span="10" class="table-cell" style="display: flex;">
                      <div class="demo-image__preview"  v-for="(item, index) in goodsImgArray" :key="index" style="margin: 0px 10px;">
                        <el-image 
                          style="width: 50px; height: 50px"
                          :src="item" 
                          :preview-src-list="goodsImgArray">
                        </el-image>
                      </div> 
                      <!-- <img :src="orderInfo.goodsImgArray" style="height: 40px"/> -->
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="4" class="table-cell-title">开始时间</el-col>
                    <el-col :span="4" class="table-cell-title">到期时间</el-col>
                    <el-col :span="4" class="table-cell-title">寄存天数</el-col>
                    <el-col :span="4" class="table-cell-title"><i class="el-icon-question" title="首次寄存金额"></i>寄存金额</el-col>
                    <el-col :span="4" class="table-cell-title"><i class="el-icon-question" title="寄存金额 - 延期差价"></i>&nbsp;买回本金</el-col>
                    <el-col :span="4" class="table-cell-title">技术服务费</el-col>
                                    
                  </el-row>
                  <el-row>
                    <el-col :span="4" class="table-cell">{{parseTime (orderInfo.startTime)}}</el-col>
                    <el-col :span="4" class="table-cell" style="color: red;">{{parseTime(orderInfo.expireTime)}}</el-col>
                    <el-col :span="4" class="table-cell">{{orderInfo.depositDays || 0 }}天</el-col>
                    <el-col :span="4" class="table-cell">{{(parseFloat(orderInfo.redeemAmount) - parseFloat(orderInfo.serviceFee)).toFixed(2) || 0 }}</el-col>
                    <el-col :span="4" class="table-cell">{{orderInfo.depositAmount || 0 }}</el-col>
                    <el-col :span="4" class="table-cell">{{orderInfo.serviceFee || 0 }}</el-col>
                    
                  </el-row>
                  <el-row>        
                    <el-col :span="4" class="table-cell-title">首次买回金额</el-col>     
                    <el-col :span="4" class="table-cell-title"><i class="el-icon-question" title="存在延期"></i>&nbsp;实际到期时间</el-col>
                    <el-col :span="4" class="table-cell-title"><i class="el-icon-question" title="存在延期"></i>&nbsp;实际寄存天数</el-col>
                    <el-col :span="4" class="table-cell-title"><i class="el-icon-question" title="寄存金额+服务费 - 延期差价"></i>&nbsp;实际买回金额</el-col>
                    <el-col :span="4" class="table-cell-title"><i class="el-icon-question" title="实际买回金额 - 优惠金额"></i>&nbsp;最终买回金额</el-col>
                    <el-col :span="4" class="table-cell-title">(-优惠/+逾期)金额</el-col>   
                  </el-row>
                  <el-row>
                    <el-col :span="4" class="table-cell">{{orderInfo.redeemAmount || 0 }}</el-col>
                    <el-col :span="4" class="table-cell" style="color: red;">{{parseTime(orderInfo.actualExpireTime)}}</el-col>
                    <el-col :span="4" class="table-cell" style="color: red;">{{orderInfo.actualDepositDays || 0 }}天</el-col>
                    <el-col :span="4" class="table-cell" style="color: red;">{{orderInfo.actualRedeemAmount || 0 }}</el-col>
                    <el-col :span="4" class="table-cell" style="color: red;">
                      {{(parseFloat(orderInfo.actualRedeemAmount) + parseFloat(orderInfo.redeemDiscountAmount)).toFixed(2) || 0 }}
                      
                    </el-col>
                    <el-col :span="4" class="table-cell" style="color: red;">{{orderInfo.redeemDiscountAmount || 0 }}</el-col>             
                  </el-row>
                  <el-row>     
                    <el-col :span="4" class="table-cell-title">交付类型</el-col>        
                    <el-col :span="20" class="table-cell-title"><i class="el-icon-picture"></i>&nbsp;寄存凭证</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="4" class="table-cell">      
                      <el-tag size="small" v-if="orderInfo.deliverType === 1" style="color: green;">当面</el-tag>
                      <el-tag size="small" v-else>邮寄</el-tag>         
                    </el-col>
                    <el-col :span="20" class="table-cell" style="display: flex;">
                      <!-- <img :src="orderInfo.depositVoucher" style="height: 40px"/> -->
                      <div class="demo-image__preview"  v-for="(item, index) in depositVoucherArray" :key="index" style="margin: 0px 10px;">
                        <el-image 
                          style="width: 50px; height: 50px"
                          :src="item" 
                          :preview-src-list="depositVoucherArray">
                        </el-image>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>             
                    <el-col :span="4" class="table-cell-title">寄存位置</el-col>
                    <el-col :span="4" class="table-cell-title">支付状态</el-col>
                    <el-col :span="4" class="table-cell-title">支付时间</el-col>
                    <el-col :span="4" class="table-cell-title">支付方式</el-col>
                    <el-col :span="4" class="table-cell-title">是否延期</el-col>
                    <el-col :span="4" class="table-cell-title">创建时间</el-col>         
                  </el-row>
                  <el-row>
                    <el-col :span="4" class="table-cell">{{orderInfo.depositLocation }}</el-col>
                    <el-col :span="4" class="table-cell">
                      <el-tag size="small" v-if="orderInfo.payStatus === 0" style="color: red;">未支付</el-tag>
                      <el-tag size="small" v-else>已支付</el-tag>
                    </el-col>
                    <el-col :span="4" class="table-cell">{{parseTime(orderInfo.payTime)}}</el-col>
                    <el-col :span="4" class="table-cell">{{orderInfo.payType }}</el-col>
                    <el-col :span="4" class="table-cell">
                      <el-tag size="small" v-if="orderInfo.isDelay === 1" style="color: red;">是</el-tag>
                      <el-tag size="small" v-else>否</el-tag>
                    </el-col>
                    <el-col :span="4" class="table-cell">{{parseTime(orderInfo.createTime)}}</el-col>
                  </el-row>
                  <el-row v-if="(orderInfo.payStatus === 1)">   
                    <el-col :span="4" class="table-cell-title">买回类型</el-col>          
                    <el-col :span="4" class="table-cell-title">买回凭证</el-col>
                    <el-col :span="4" class="table-cell-title">买回时间</el-col>
                    <el-col :span="12" class="table-cell-title">买回备注</el-col>
                  </el-row>
                  <el-row v-if="(orderInfo.payStatus === 1)">
                    <el-col :span="4" class="table-cell">
                      <el-tag size="small" v-if="orderInfo.redeemType === 1" style="color: red;">当面</el-tag>
                      <el-tag size="small" v-else>邮寄</el-tag>
                    </el-col>
                    <el-col :span="4" class="table-cell">
                      <!-- <img :src="orderInfo.redeemVoucher" style="height: 40px"/> -->
                        <div class="demo-image__preview"  v-for="(item, index) in redeemVoucherArray" :key="index" style="margin: 0px 10px;">
                          <el-image 
                            style="width: 50px; height: 50px"
                            :src="item" 
                            :preview-src-list="redeemVoucherArray">
                          </el-image>
                        </div> 
                    </el-col>
                    <el-col :span="4" class="table-cell">{{parseTime (orderInfo.redeemTime)}}</el-col>
                    <el-col :span="12" class="table-cell">{{orderInfo.redeemRemarks }}</el-col>
                  </el-row>
                  
                  <el-row>   
                    <el-col :span="12" class="table-cell-title">寄存描述</el-col>                        
                    <el-col :span="12" class="table-cell-title">订单备注</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12" class="table-cell">{{orderInfo.introduction }}</el-col>                   
                    <el-col :span="12" class="table-cell">{{orderInfo.orderRemarks }}</el-col>
                  </el-row>
                </div>
                <div class="operate-container" style="margin-top: 15px" v-if="syOrderDelayList.length > 0 || delOrderDelayList.length > 0">
                  <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                  <span class="font-small"><i class="el-icon-s-order"></i>&nbsp;延期信息</span>
                </div>
                <el-tabs v-model="activeName" @tab-click="handleClick" v-if="syOrderDelayList.length > 0 ">
                  <el-tab-pane label="正常延期订单" name="first">
                    <el-table v-if="syOrderDelayList.length > 0"
                      :data="syOrderDelayList"
                      size="small"
                      style="width: 100%;margin-top: 10px" >
                      <el-table-column show-overflow-tooltip label="延期编号" width="135" align="center">
                        <template slot-scope="scope">
                          <p>{{scope.row.delayNo}}</p>
                        </template>
                      </el-table-column>
                      <el-table-column label="延期批次" width="80" align="center">
                        <template slot-scope="scope">
                          <p>{{scope.row.delayBatch}}</p>
                        </template>
                      </el-table-column>
                      <el-table-column show-overflow-tooltip label="延期开始时间" width="140" align="center">
                        <template slot-scope="scope">
                          <p>{{parseTime(scope.row.delayStartTime)}}</p>
                        </template>
                      </el-table-column>
                      <el-table-column show-overflow-tooltip label="延期到期时间" width="140" align="center">
                        <template slot-scope="scope">
                          <p>{{parseTime(scope.row.delayExpireTime)}}</p>
                        </template>
                      </el-table-column>
                      <el-table-column label="延期天数" width="80" align="center">
                        <template slot-scope="scope">
                          <p>{{scope.row.delayDays || 0 }}天</p>
                        </template>
                      </el-table-column>
                      <el-table-column label="延期服务费" width="80" align="center">
                        <template slot-scope="scope">
                          <p>{{scope.row.delayServiceFee}}</p>
                        </template>
                      </el-table-column>
                      <el-table-column label="延期差价" width="80" align="center">
                        <template slot-scope="scope">
                          <p>{{scope.row.delayPriceDifference}}</p>
                        </template>
                      </el-table-column>
                      <el-table-column label="买回金额" width="80" align="center">
                        <template slot-scope="scope">
                          {{scope.row.redeemAmount}}
                        </template>
                      </el-table-column>
                      <el-table-column label="支付金额" width="80" align="center">
                        <template slot-scope="scope">
                          {{scope.row.payPrice}}
                        </template>
                      </el-table-column>
                      <el-table-column label="支付状态" width="80" align="center">
                        <template slot-scope="scope">
                          <el-tag size="small" v-if="scope.row.payStatus === 0" style="color: red;">未支付</el-tag>
                          <el-tag size="small" v-else>已支付</el-tag>
                        </template>
                      </el-table-column>
                      <el-table-column label="支付时间" width="140" align="center">
                        <template slot-scope="scope">
                          <p>{{parseTime(scope.row.payTime)}}</p>
                        </template>
                      </el-table-column>
                      <el-table-column label="支付方式" width="80" align="center">
                        <template slot-scope="scope">
                          <el-tag size="small" style="color: blue;">{{scope.row.payType}}</el-tag>
                        </template>
                      </el-table-column>
                      <el-table-column label="是否逾期" width="80" align="center">
                        <template slot-scope="scope">
                          <el-tag size="small" v-if="scope.row.isOverdue === 1" style="color: red;">是</el-tag>
                          <el-tag size="small" v-else>否</el-tag>
                        </template>
                      </el-table-column>
                      <el-table-column label="逾期天数" width="80" align="center">
                        <template slot-scope="scope">
                          {{scope.row.overdueDays}}
                        </template>
                      </el-table-column>
                      <el-table-column label="逾期费用" width="80" align="center">
                        <template slot-scope="scope">
                          {{scope.row.overdueFee}}
                        </template>
                      </el-table-column>
                      
                      <el-table-column show-overflow-tooltip label="延期备注" width="150" align="center">
                        <template slot-scope="scope">
                          {{scope.row.overdueRemarks}}
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="已删除" name="second" v-if="delOrderDelayList.length > 0">
                    <el-table
                      :data="delOrderDelayList"
                      size="small"
                      style="width: 100%;margin-top: 10px" >
                      <el-table-column show-overflow-tooltip label="延期编号" width="135" align="center">
                        <template slot-scope="scope">
                          <p>{{scope.row.delayNo}}</p>
                        </template>
                      </el-table-column>
                      <el-table-column label="延期批次" width="80" align="center">
                        <template slot-scope="scope">
                          <p>{{scope.row.delayBatch}}</p>
                        </template>
                      </el-table-column>
                      <el-table-column show-overflow-tooltip label="延期开始时间" width="140" align="center">
                        <template slot-scope="scope">
                          <p>{{parseTime(scope.row.delayStartTime)}}</p>
                        </template>
                      </el-table-column>
                      <el-table-column show-overflow-tooltip label="延期到期时间" width="140" align="center">
                        <template slot-scope="scope">
                          <p>{{parseTime(scope.row.delayExpireTime)}}</p>
                        </template>
                      </el-table-column>
                      <el-table-column label="延期天数" width="80" align="center">
                        <template slot-scope="scope">
                          <p>{{scope.row.delayDays || 0 }}天</p>
                        </template>
                      </el-table-column>
                      <el-table-column label="延期服务费" width="80" align="center">
                        <template slot-scope="scope">
                          <p>{{scope.row.delayServiceFee}}</p>
                        </template>
                      </el-table-column>
                      <el-table-column label="延期差价" width="80" align="center">
                        <template slot-scope="scope">
                          <p>{{scope.row.delayPriceDifference}}</p>
                        </template>
                      </el-table-column>
                      <el-table-column label="买回金额" width="80" align="center">
                        <template slot-scope="scope">
                          {{scope.row.redeemAmount}}
                        </template>
                      </el-table-column>
                      <el-table-column label="支付金额" width="80" align="center">
                        <template slot-scope="scope">
                          {{scope.row.payPrice}}
                        </template>
                      </el-table-column>
                      <el-table-column label="支付状态" width="80" align="center">
                        <template slot-scope="scope">
                          <el-tag size="small" v-if="scope.row.payStatus === 0" style="color: red;">未支付</el-tag>
                          <el-tag size="small" v-else>已支付</el-tag>
                        </template>
                      </el-table-column>
                      <el-table-column label="支付时间" width="140" align="center">
                        <template slot-scope="scope">
                          <p>{{parseTime(scope.row.payTime)}}</p>
                        </template>
                      </el-table-column>
                      <el-table-column label="支付方式" width="80" align="center">
                        <template slot-scope="scope">
                          <el-tag size="small" style="color: blue;">{{scope.row.payType}}</el-tag>
                        </template>
                      </el-table-column>
                      <el-table-column label="是否逾期" width="80" align="center">
                        <template slot-scope="scope">
                          <el-tag size="small" v-if="scope.row.isOverdue === 1" style="color: red;">是</el-tag>
                          <el-tag size="small" v-else>否</el-tag>
                        </template>
                      </el-table-column>
                      <el-table-column label="逾期天数" width="80" align="center">
                        <template slot-scope="scope">
                          {{scope.row.overdueDays}}
                        </template>
                      </el-table-column>
                      <el-table-column label="逾期费用" width="80" align="center">
                        <template slot-scope="scope">
                          {{scope.row.overdueFee}}
                        </template>
                      </el-table-column>
                      <el-table-column show-overflow-tooltip label="延期备注" width="150" align="center">
                        <template slot-scope="scope">
                          {{scope.row.overdueRemarks}}
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-tab-pane>
                </el-tabs>
                
                <div class="operate-container" style="margin-top: 15px">
                  <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                  <span class="font-small"><i class="el-icon-s-custom"></i>&nbsp;检测师信息</span>
                </div>
                <div class="table-layout">
                  <el-row>
                    <el-col :span="4" class="table-cell-title">用户名</el-col>
                    <el-col :span="8" class="table-cell-title">检测师昵称</el-col>
                    <el-col :span="8" class="table-cell-title">手机号码</el-col>
                    <el-col :span="4" class="table-cell-title">微信号</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="4" class="table-cell">{{syUserTester.userName}}</el-col>
                    <el-col :span="8" class="table-cell">{{syUserTester.nickname}}</el-col>
                    <el-col :span="8" class="table-cell">{{syUserTester.phone}}</el-col>
                    <el-col :span="4" class="table-cell"><el-tag size="small">{{syUserTester.wechatNumber}}</el-tag></el-col>
                    
                  </el-row>
                </div>
                <div class="operate-container" style="margin-top: 15px">
                  <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                  <span class="font-small"><i class="el-icon-s-custom"></i>&nbsp;客户信息</span>
                </div>
                <div class="table-layout">
                  <el-row>
                    <el-col :span="4" class="table-cell-title">客户账号</el-col>
                    <el-col :span="8" class="table-cell-title">客户姓名</el-col>
                    <el-col :span="8" class="table-cell-title">电话</el-col>
                    <el-col :span="4" class="table-cell-title">办理次数</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="4" class="table-cell">{{yxUser.username}}</el-col>
                    <el-col :span="8" class="table-cell">{{yxUser.username}}</el-col>
                    <el-col :span="8" class="table-cell">{{yxUser.phone}}</el-col>
                    <el-col :span="4" class="table-cell"><el-tag size="small">{{yxUser.payCount}}</el-tag></el-col>
                  </el-row>
                </div>
                
    
              </el-card>
            
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="dialogVisible = false">取消</el-button>
          </div>
        </el-dialog>
        <!--表格渲染-->
        <el-table ref="table" :summary-method="getSummaries" show-summary v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
          <el-table-column type="selection" width="55" v-if="false"/>
          <el-table-column show-overflow-tooltip v-if="columns.visible('orderNo')" prop="orderNo" label="寄存订单号" width="145"/>
		  <el-table-column show-overflow-tooltip v-if="columns.visible('businessName')" prop="businessName" label="所属招商" />	
          <el-table-column show-overflow-tooltip v-if="columns.visible('userName')" prop="userName" label="用户账号" width="145">
            <template slot-scope="scope">
              <span>{{ scope.row.userName }}-({{ scope.row.realName || ''}})</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip v-if="columns.visible('depositGoods')" prop="depositGoods" label="寄存商品" />
          
          <el-table-column show-overflow-tooltip v-if="columns.visible('actualDepositDays')" prop="actualDepositDays" label="寄存天数" width="70">
            <template slot-scope="scope">
              <span>{{ scope.row.actualDepositDays }} 天</span>
            </template>
          </el-table-column>
          <el-table-column sortable show-overflow-tooltip v-if="columns.visible('firstDepositAmount')" prop="firstDepositAmount" title="寄存金额" label="寄存金额" width="100">
            <template slot-scope="scope">
              <span>{{ parseFloat(scope.row.firstDepositAmount).toFixed(2) || 0 }}</span>
            </template>
          </el-table-column>
          <el-table-column sortable show-overflow-tooltip v-if="columns.visible('depositAmount')" prop="depositAmount" title="买回本金" label="买回本金" width="100">
            <template slot-scope="scope">
              <span>{{ parseFloat(scope.row.depositAmount).toFixed(2) || 0 }}</span>
            </template>
          </el-table-column>
          <el-table-column sortable show-overflow-tooltip v-if="columns.visible('actualRedeemAmount')" prop="actualRedeemAmount" title="买回金额(寄存金额+服务费 - 延期差价)" label="实际买回金额" width="120">
            <template slot-scope="scope">
              <span>{{ parseFloat(scope.row.actualRedeemAmount).toFixed(2) || 0 }}</span>
            </template>
          </el-table-column>
          <el-table-column sortable show-overflow-tooltip v-if="columns.visible('redeemDiscountAmount')" prop="redeemDiscountAmount" title="-优惠/+逾期" label="-优惠/+逾期" width="110">
            <template slot-scope="scope">
              <span>{{ parseFloat(scope.row.redeemDiscountAmount).toFixed(2) || 0 }}</span>
            </template>
          </el-table-column>

          <el-table-column sortable show-overflow-tooltip v-if="columns.visible('finalPayAmount')" prop="finalPayAmount" title="实际买回金额-优惠金额" label="最终买回金额" width="120">
            <template slot-scope="scope">
              <span>{{ parseFloat(scope.row.finalPayAmount).toFixed(2) || 0 }}</span>
            </template>
          </el-table-column>
          
          <el-table-column show-overflow-tooltip v-if="columns.visible('startTime')" prop="startTime" label="开始时间">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.startTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip v-if="columns.visible('actualExpireTime')" prop="actualExpireTime" label="到期时间">
            <template slot-scope="scope">
              <span style="color: #e6a23c;">{{ parseTime(scope.row.actualExpireTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip v-if="columns.visible('status')" prop="status" label="订单状态">
              <template slot-scope="scope">
                  <div v-if="scope.row.status === 0">
                    <b style="color: #909399;" slot="reference">0-寄存期内</b>
                  </div>
                  <div v-else-if="scope.row.status === 1">
                    <b style="color: #f56c6c;" slot="reference">1-已逾期</b>
                  </div>
                  <div v-else-if="scope.row.status === 2">
                    <b style="color: #67c23a;" slot="reference">已延期内:{{ parseTime(scope.row.updateTime) }}</b>
                    <div style="color: #3a77c2;" slot="reference">支付时间:{{ parseTime(scope.row.delayPayTime) }}</div>
                  </div>
                  <div v-else-if="scope.row.status === 3">
                    <b style="color: #f124c7;" slot="reference">3-买回中</b>
                  </div>
                  <div v-else-if="scope.row.status === 4">
                    <b style="color:#409eff;" slot="reference">已买回({{ parseTime(scope.row.redeemTime) }})</b>
                  </div>
                  <div v-else-if="scope.row.status === 5">
                    <b style="color: red;" slot="reference">回收({{ parseTime(scope.row.updateTime) }})</b>
                  </div>
                  <div v-else-if="scope.row.status === 6">
                    <b style="color: #e6a23c;" slot="reference">6-回收买回</b>
                  </div>
                <span v-else style="display: inline-block">无</span>       
              </template>
          </el-table-column>
          <!-- <el-table-column show-overflow-tooltip v-if="columns.visible('isDelay')" prop="isDelay" label="是否延期" width="80">
            <template slot-scope="scope">
                <div v-if="scope.row.isDelay === 0">
                  <b  style="display: inline-block">0-否</b>
                </div>
              <span v-else style="color: red;" slot="reference">1-是</span>       
            </template>
          </el-table-column> -->
          <el-table-column show-overflow-tooltip v-if="columns.visible('createTime')" prop="createTime" label="创建时间">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip v-if="columns.visible('userTesterInfo')" prop="userTesterInfo" label="检测师" width="145">
            <template slot-scope="scope">
              <span>{{ scope.row.userTesterInfo }}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip v-if="columns.visible('redeemRemarks')" prop="redeemRemarks" label="买回备注" width="80"/>
          <el-table-column v-permission="['admin','syOrderInfo:edit','syOrderInfo:del']" label="操作" width="170px" align="center">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-search"
                @click="toDetailViews(scope.row.id)"
              ></el-button>

              <!-- <el-dropdown size="mini" split-button type="primary" trigger="click" v-if="scope.row.status !='4'">
              操作
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-button
                    size="mini"
                    type="success"
                    @click="remark(scope.row)"
                  >
                    线下买回</el-button>
                </el-dropdown-item>     
              </el-dropdown-menu>
            </el-dropdown> -->
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination />
      </div>

    </div>
</template>

<script>
import crudSyOrderInfo from '@/api/syOrderInfo'
import {getOrderInfo} from '@/api/syOrderInfo'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import { getTesterList } from '@/api/syMailReport'
import { getBusinessNameList } from '@/api/syBusinessName'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import { formatTime, formatTimeTwo } from '@/utils/index'
import MaterialList from "@/components/material";
import eRemark from './remark'
// crud交由presenter持有
const defaultCrud = CRUD({ title: 'SyOrderInfoController', url: 'api/syOrderInfo', sort: 'create_time,desc', crudMethod: { ...crudSyOrderInfo }})
const defaultForm = { id: null, orderNo: null, uid: null, userName: null, userTesterId: null, depositGoods: null, depositDays: null, depositAmount: null, serviceFee: null, redeemAmount: null, startTime: null, expireTime: null, introduction: null, deliverType: null, depositVoucher: null, depositLocation: null, payStatus: null, payTime: null, payType: null, status: null, isDelay: null, actualDepositDays: null, actualExpireTime: null, actualRedeemAmount: null, redeemRemarks: null, orderRemarks: null, isDel: null, createTime: null, updateTime: null }

export default {
  name: 'SyOrderInfo',
  components: { pagination, crudOperation, rrOperation, udOperation ,MaterialList ,eRemark},
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  data() {
    return {
      delayPayTime : '',
      startTime : '',
      redeemTime: '',
      isAdd:false,
      depositVoucherArray:[],//寄存凭证
      goodsImgArray:[],//寄存商品
      redeemVoucherArray:[],//线下买回凭证
      status:'-9',
      createTime: '',
      activeName: 'first',
      dialogVisible: false,
      orderInfo:{},//订单属性
      syUserTester:{},//检测师
      yxUser:{},//客户
      syOrderDelayList:[],//逾期列表-正常单
      delOrderDelayList:[],//删除单
      optionsTesterList: [],//检测师列表
      businessNameList: [],//商户列表
      permission: {
        add: ['admin', 'syOrderInfo:add'],
        edit: ['admin', 'syOrderInfo:edit'],
        del: ['admin', 'syOrderInfo:del']
      },
      rules: {},
      queryTypeOptions: [
        { key: '0', display_name: '0-否' },
        { key: '1', display_name: '1-是' }
      ]
    }
  },
  watch: {
  },
  created() {
    let that = this;
    setTimeout(function() {
      that.getTesterListInit();
      that.getBusinessListInit();
    }, 500);
  },
  methods: {
      getSummaries (param) {
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计'
        } else if (index === 4 || index === 5 || index === 6 || index === 7 || index === 8) {
          const values = data.map(item => Number(item[column.property]))
            if (!values.every(value => isNaN(value))) {
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr)
                if (!isNaN(value)) {
                  return (parseFloat(prev) + parseFloat(curr)).toFixed(2);
                  
                } else {
                  return parseFloat(prev).toFixed(2);
                }
              }, 0)
            } else {
              sums[index] = 'N/A'
            }
      } else {
        sums[index] = ''
      }
    })
      return sums
    },
    remark(data) {
        this.isAdd = false
        const _this = this.$refs.form4
        _this.form = {
          id: data.id,
          orderNo: data.orderNo,
          depositGoods: data.depositGoods,
          actualRedeemAmount: data.actualRedeemAmount,
          redeemRemarks: data.redeemRemarks
        }
        _this.dialog = true
      },
    getTesterListInit(){
      getTesterList().then(res => {
        this.optionsTesterList = res.testerList;
      })
    },
	getBusinessListInit(){
	  getBusinessNameList().then(res => {
	    this.businessNameList = res;
	  })
	},
    formatTime,
    formatTimeTwo,
    handleOrder(tab, event) {
      this.status = tab.name;
      this.query.status = this.status;
      this.crud.toQuery();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    toDetailViews(id) {
      this.dialogVisible = true
      getOrderInfo(id).then((res) => {
        this.goodsImgArray = [];
        this.depositVoucherArray = [];
        this.redeemVoucherArray = [];
        this.orderInfo = res.orderInfo;//订单属性
        this.yxUser = res.yxUser;//客户
        this.syUserTester = res.syUserTester;//检测师
        this.syOrderDelayList = res.syOrderDelayList;//逾期列表
        this.delOrderDelayList = res.delOrderDelayList;
        this.dialogVisible = true
        this.activeName =  'first';

        let voucherArray = [];//商品凭证
        if(res.orderInfo.depositVoucher){
          voucherArray = JSON.parse(res.orderInfo.depositVoucher);
        }
        if(voucherArray.length > 0){
          voucherArray.forEach(item => {
            this.depositVoucherArray.push(item.imgUrl);
          })
        }else{
          this.depositVoucherArray = [];
        }

        let imgArray = [];//商品
        if(res.orderInfo.goodsImg){
          imgArray = JSON.parse(res.orderInfo.goodsImg);
        }
        if(imgArray.length > 0){
          imgArray.forEach(item => {
            this.goodsImgArray.push(item.imgUrl);
          })
        }else{
          this.goodsImgArray = [];
        }

        let redeemArray = [];//商品
        if(res.orderInfo.redeemVoucher){
          redeemArray = JSON.parse(res.orderInfo.redeemVoucher);
        }
        if(redeemArray.length > 0){
          redeemArray.forEach(item => {
            this.redeemVoucherArray.push(item.imgUrl);
          })
        }else{
          this.redeemVoucherArray = [];
        }
        
      }).then(() => {
        this.dialogVisible = true
        this.activeName =  'first';
      })
    },
    // 获取数据前设置好接口地址
    [CRUD.HOOK.beforeRefresh]() {
      const query = this.query
      console.info("------------"+query.status);
      if(query.status =='0' || query.status =='2' || query.status =='4'){
        if(query.status =='0'){
          this.delayPayTime ='';
          this.redeemTime ='';
          this.query.startTime = this.startTime;
          this.query.delayPayTime = '';
          this.query.redeemTime = '';
        }
        if(query.status =='2'){
          this.startTime ='';
          this.redeemTime ='';
          this.query.delayPayTime =this.delayPayTime;
          this.query.startTime = '';
          this.query.redeemTime = '';
        }
        if(query.status =='4'){
          this.startTime ='';
          this.delayPayTime ='';
          this.query.redeemTime =this.redeemTime;
          this.query.delayPayTime = '';
          this.query.startTime = '';
        }
        this.createTime = '';
        this.query.createTime = '';
      }else{
        this.delayPayTime ='';
        this.startTime ='';
        this.redeemTime ='';
        this.query.delayPayTime = '';
        this.query.startTime = '';
        this.query.redeemTime = '';
        this.query.createTime =this.createTime;
      }
      if(query.status =='1' || query.status =='2' || query.status =='3' || query.status =='4' || query.status =='5'){
        if(query.status =='4'){
          this.crud.params.sort = 'redeem_time,desc';
        }else if(query.status =='2'){
          this.crud.params.sort = 'delay_pay_time,desc';
        }else if(query.status =='1'){
          this.crud.params.sort = 'actual_expire_time,desc';
        }else{
          this.crud.params.sort = 'update_time,desc';
        }
      }else{
        this.crud.params.sort = 'create_time,desc';
      }
      if (query.type && query.value) {
        this.crud.params[query.type] = query.value
      }else{
        delete this.crud.params.orderNo
        delete this.crud.params.uid
        delete this.crud.params.userName
        delete this.crud.params.realName
        delete this.crud.params.userTesterId
        delete this.crud.params.businessId
        delete this.crud.params.status
        delete this.crud.params.isDelay
        delete this.crud.params.createTime
      }
      return true
    }, // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {
    },
  }
}
</script>

<style scoped lang="scss">

  ::v-deep .el-table__footer-wrapper tbody td {
    color: red;
    font-weight: bold;
  }

  .table-img {
    display: inline-block;
    text-align: center;
    background: #ccc;
    color: #fff;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    line-height: 32px;
  }
  .container {
    height: calc(100% - 80px);
    position: absolute;
    overflow: auto;
    width: calc(100% - 20px);

    .order-caculate {
      font-size: 14px;
      color: #909399;
      border-top: 1px solid #f0f0f0;
      padding: 20px 10px;
      .caculate-title {
        display: inline-block;
        margin-right: 50px;
      }
      .caculate-num {
        font-size: 20px;
        color: #ff4949;
      }
    }

    .el-table th {
      background-color: #fafafa;
    }
  }

  .footer-contains {
    position: absolute;
    display: -ms-flexbox;
    display: flex;
    background-color: #f6f6f6;
    bottom: 0;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    z-index: 999;
    padding: 0 20px 0 13px;
  }

  .detail-container {
  width: 80%;
  padding: 20px 20px 20px 20px;
  margin: 20px auto;
}

.operate-container {
  background: #F2F6FC;
  height: 40px;
  margin: -10px 0px 0;
  line-height: 40px;
}

.operate-button-container {
  float: right;
  margin-right: 20px
}

.table-layout {
  margin-top: 0px;
  border-left: 1px solid #DCDFE6;
  border-top: 1px solid #DCDFE6;
}

.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}

.table-cell-title {
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  background: #F2F6FC;
  text-align: center;
  font-size: 14px;
  color: #303133;
}
</style>